<template>
  <div class="tv">
    <van-nav-bar fixed placeholder>
      <template #title>
        <van-tabs v-model="activeName" @click="showTable">
          <van-tab title="开播" name="a"></van-tab>
          <van-tab title="发现" name="b"></van-tab>
          <van-tab title="附近" name="c"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div>
          <van-row>
            <van-col span="12" v-for="(item, i) in list" :key="i" @click="intoRoom(item.url)">
              <van-image width="12rem" fit="cover" :src="'data:image/png;base64,' + item.photo" />
              &nbsp;<span class="author">房间:{{ item.roomName }}</span>
            </van-col>
          </van-row>
        </div>
      </van-list>
    </van-pull-refresh>

    <van-tabbar v-model="active" fixed @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="tv-o">直播</van-tabbar-item>
      <van-uploader :after-read="afterRead">
        <van-tabbar-item icon="plus">搭一搭</van-tabbar-item>
      </van-uploader>
      <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tv',
  data() {
    return {
      activeName: 'b',
      list: [],
      active: 1,
      isLoading: false,
      finished: false,
      loading: false,
      pageNum: 1,
      pageSize: 10,
    }
  },
  created: function () {
    this.pageNum = 1
    const tel = window.localStorage.getItem("dazi_")
    this.$axios.get('http://localhost:9090/dazi/tv/list?pageNum=' + this.pageNum + "&pageSize=" + this.pageSize)
      .then(res => {
        this.list = res.data;

        this.pageNum = this.pageNum + 1
      })
  },
  methods: {
    intoRoom(url) {
      this.$router.push({ path: '/tvRoom', query: { url: url } })
    },
    afterRead(file) {
      this.$router.push({ path: '/say', query: { file: file } })
    },
    //上拉刷新
    onLoad() {
      this.loading = true
      const tel = window.localStorage.getItem("dazi_")
      this.$axios.get('http://localhost:9090/dazi/tv/list?pageNum=' + this.pageNum + "&pageSize=" + this.pageSize)
        .then(res => {
          if (!res.data.length == 0) {
            console.log(1)
            // 数据全部加载完成
            this.finished = true;
            this.loading = false
          } else {
            this.list = this.list.concat(res.data);
          }

          // 加载状态结束
          this.loading = false;

        })
      this.pageNum = this.pageNum + 1
    },
    //下拉
    onRefresh() {
      this.pageNum = 1
      const tel = window.localStorage.getItem("dazi_")
      this.$axios.get('http://localhost:9090/dazi/tv/list?pageNum=' + this.pageNum + "&pageSize=" + this.pageSize)
        .then(res => {
          this.list = []
          this.list = res.data;
        })

      this.isLoading = false;
    },
    search: function () {
      this.$router.push("/search")
    },
    showTable: function (name, table) {
      if (name == 'a') {
        this.$router.push("/tvShowRoom")
      }

      if (name == 'b') {
        // this.$router.push("/")
      }

      if (name == 'c') {
        // this.$router.push("/nearby")

      }
    },
    onChange(index) {
      if (index == 0) {
        this.$router.push("/");
      }

      const data = window.localStorage.getItem('dazi_')
      if (index == 3) {

        if (data) {
          this.$router.push("/chatList");
        } else {
          this.$router.push("/login");
        }

      }


      if (index == 4) {

        if (data) {
          this.$router.push("/me");
        } else {
          this.$router.push("/login");
        }
      }
    },
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-col {
  padding-left: 1.5px;
  margin: 6px 0;
}

.content {
  padding: 10px 6px;
  /* font-size: 1.2rem; */
}

.photo {
  padding: 0 6px;

}
</style>
